<script setup>
import { useRoute } from 'vue-router'
import { useFeedbacks } from '@/stores/nepm/feedback.js'
import { storeToRefs } from 'pinia'
import { computed, onMounted, watch } from 'vue'

const feedback = useFeedbacks()
const { allFeedbacks, curFeedback, aqis, PCRs, ids, gridors, gridor, fullLoading } =
  storeToRefs(feedback)

const goBack = () => {
  feedback.undoGoBack()
}

const find = () => {
  feedback.find()
}

const clear = () => {
  feedback.clear()
}

onMounted(() => {
  feedback.undoCheckData()
  feedback.loadDATA()
  feedback.loadPCR()
  feedback.logAQI()
})

watch(ids, (newVal) => {
  console.log(ids, newVal)
  if (newVal === undefined) feedback.clearGridors()
  else feedback.loadGridors(newVal[newVal.length - 1])
})

const distribute = () => {
  feedback.distribute()
}
</script>

<template>
  <el-card class="login">
    <template
      #header
      style="
        width: fit-content;
        height: 60px;
        background-color: #303133;
        position: fixed !important;
        marign-top: 0px;
        marign-left: 0px;
      "
    >
      <el-page-header @back="goBack" content="详情页面" title="返回"> </el-page-header>
    </template>
    <template #default>
      <el-descriptions
        title="公众监督反馈结果"
        direction="horizontal"
        :column="1"
        :size="medium"
        border
      >
        <el-descriptions-item>
          <template #label>
            <span class="common_label">上报人</span>
          </template>
          {{ curFeedback.pname }}
        </el-descriptions-item>
        <el-descriptions-item label="上报地点">{{ curFeedback.address }}</el-descriptions-item>
        <el-descriptions-item label="上报时间">{{ curFeedback.createtime }}</el-descriptions-item>
        <el-descriptions-item label="预估AQI"
          >{{ curFeedback.aid }}级
          <el-tag>{{ aqis.find((p) => p.id === curFeedback.aid).expln }}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="上报描述">{{ curFeedback.remark }}</el-descriptions-item>
        <el-descriptions-item label="上报网格">
          <el-tag v-for="item in curFeedback.grids">{{ item }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="网格员">
          {{ curFeedback.gname }}
        </el-descriptions-item>
      </el-descriptions>

      <div
        v-if="curFeedback.gname === null"
        style="display: flex; flex-direction: row; margin-top: 30px; margin-left: 200px"
      >
        <el-space :fill="fill" wrap>
          <el-button @click="clear">清空</el-button>
          <el-cascader
            v-model="ids"
            placeholder="--请选择异地网格--"
            :options="PCRs"
            :props="{ value: 'id', label: 'gname' }"
          />
          <el-select
            v-model="gridor"
            placeholder="--请选择网格员--"
            style="width: 240px; height: 32px"
          >
            <el-option v-for="item in gridors" :label="item.mname" :value="item.id" />
          </el-select>
          <el-button v-loading.fullscreen.lock="fullLoading" type="primary" @click="distribute">
            派遣
          </el-button>
        </el-space>
      </div>
    </template>
  </el-card>
</template>
<style lang="scss">
.common_label {
  max-width: 100px; /* 设置最大宽度 */
  display: inline-block; /* 使得宽度限制生效 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /* 避免换行 */
}

.login .el-page-header {
  line-height: 60px;
  margin-left: 20px;
}
.login .el-page-header__content {
  color: #181818;
}

.el-descriptions-item__label {
  width: 100px;
}
.label_style {
  text-align: center; //文本居中
  font-weight: 600;
  height: 60px;
  width: 30%;
  word-break: keep-all;
}
.content_style {
  text-align: center;
  min-width: 200px;
  word-break: break-all; //过长时自动换行
}
</style>
